oa.view.rf.fractionEquation = {
/**
 * Render the structure of a fractionEquation
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblemList} ap  A List of arithmetic problems.
 */
render: function(ap) {
  var el = {};
  var rB = document.getElementById("renderBox");
  var apDivEl = dom.createDiv("fractionEquation");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild(apDivEl); 
  var natural, frac, btnWrapper;
  // operand1
  // special case for natural number
  if (ap.type.mixedFractions && ap.type.numberRanges[1].lbD == 1 && ap.type.numberRanges[1].ubD == 1) {
    natural = dom.createDiv(null, "natural");
    
    if (ap.type.askedFor == 1) {
      el = dom.createNumInput("askedFor", null, "natural1");
      natural.appendChild(el);
    } else {
      el = dom.createDiv("natural1");
      natural.appendChild(el);
    }
    apDivEl.appendChild(natural);
  
  } else { // fraction
    frac = dom.createDiv(null, "fraction");
    
    // numerator
    if ((ap.type.askedFor == 1) && 
      (ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.numerator ||
      ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.both)) {
      el = dom.createNumInput("askedForNum", "operand", "numerator1");
      frac.appendChild(el);
    } else {
      el = dom.createSpan("numerator1", "operand");
      frac.appendChild(el);
    }
    // slash
    el = document.createElement("hr");
    el.setAttribute("class", "slash");
    frac.appendChild(el);
  
    // denominator
    if ((ap.type.askedFor == 1) && 
      (ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.denominator ||
      ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.both)) {
        el = dom.createNumInput("askedForDenom", "operand", "denominator1");
        frac.appendChild(el);
    } else {
      el = dom.createSpan("denominator1", "operand");
      frac.appendChild(el);
    }
    apDivEl.appendChild(frac);
  }

  // further operator-operand pairs
  for ( var i = 2; i <= ap.operands.length; i++) {
    // operator
    el = dom.createDiv("operator" + (i - 1), "operatorFraction");
    apDivEl.appendChild(el);
    el.innerHTML = oa.view.operatorSymbols[ap.type.operators[i - 2] - 1];

    // operand
    // special case for natural number
    if (ap.type.mixedFractions && ap.type.numberRanges[i].lbD == 1 && ap.type.numberRanges[i].ubD == 1) {
      natural = dom.createDiv(null, "natural");
      
      if (ap.type.askedFor == i) {
        el = dom.createNumInput("askedFor", null, "natural" + i);
        natural.appendChild(el);
      } else {
        el = dom.createDiv("natural" + i);
        natural.appendChild(el);
      }
      apDivEl.appendChild(natural);
    
    } else { // fraction
      // numerator
      frac = dom.createDiv(null,"fraction");
      if ((ap.type.askedFor == i) && 
        (ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.numerator ||
        ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.both)) {
        el = dom.createNumInput("askedForNum", "operand", "numerator" + i);
        frac.appendChild(el);
      } else {
        el = dom.createSpan("numerator" + i, "operand");
        frac.appendChild(el);
      }
      // slash
      el = document.createElement("hr");
      el.setAttribute("class", "slash");
      frac.appendChild(el);
  
      // denominator
      if ((ap.type.askedFor == i) && 
        (ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.denominator||
        ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.both)) {
          el = dom.createNumInput("askedForDenom", "operand", "denominator" + i);
          frac.appendChild(el);
      } else {
        el = dom.createSpan("denominator" + i, "operand");
        frac.appendChild(el);
      }
      apDivEl.appendChild(frac);
    }
  }

  // equality symbol
  el = dom.createDiv("equalitySymbol", "operatorFraction");
  apDivEl.appendChild(el);
  el.innerHTML = "=";

  // result
  // special case for natural number
  if (ap.type.mixedFractions && ap.type.numberRanges[0].lbD == 1 && ap.type.numberRanges[0].ubD == 1) {
    natural = dom.createDiv(null, "natural");
    
    if (ap.type.askedFor == 0) {
      el = dom.createNumInput("askedFor", null, "resultNatural");
      natural.appendChild(el);
    } else {
      el = dom.createDiv("resultNatural");
      natural.appendChild(el);
    }
    apDivEl.appendChild(natural);
  
  } else { // fraction
    frac = dom.createDiv(null, "fraction");
    if ((ap.type.askedFor == 0) && 
      (ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.numerator ||
       ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.both)) {
      el = dom.createNumInput("askedForNum", "operand", "resultNumerator");
      frac.appendChild(el);
    } else {
      el = dom.createSpan("resultNumerator", "operand");
      frac.appendChild(el);
    }
    // slash
    el = document.createElement("hr");
    el.setAttribute("class", "slash");
    frac.appendChild(el);
  
    // denominator
    if ((ap.type.askedFor == 0) && 
      (ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.denominator ||
      ap.type.askedForNumDenomOrBoth === NumDenomOrBothEL.both)) {
      el = dom.createNumInput("askedForDenom", "operand", "resultDenominator");
      frac.appendChild(el);  
    } else {
      el = dom.createSpan("resultDenominator", "operand");
      frac.appendChild(el);
    }
    apDivEl.appendChild(frac);
  }
  
    // configure the input field
    el = document.getElementById("askedFor");
    if (el) {
      el.setAttribute("autofocus", "autofocus");
      el.addEventListener("input", oa.view.handleUserInputFractionEquation, false);
      el.addEventListener("keypress", oa.view.handleKeyPressEvents , true);
      el.focus();
    }
    el = document.getElementById("askedForNum");
    if (el) {
      el.setAttribute("autofocus", "autofocus");
      el.addEventListener("input", oa.view.handleUserInputFractionEquation, false);
      el.addEventListener("keypress", oa.view.handleKeyPressEvents, true);
      el.focus();
    }
    el = document.getElementById("askedForDenom");
    if (el) {
      el.setAttribute("autofocus", "autofocus");
      el.addEventListener("input", oa.view.handleUserInputFractionEquation, false);
      el.addEventListener("keypress", oa.view.handleKeyPressEvents, true);
      el.focus();
    }
    
    // configure the submit/continue button
    el = dom.createButton("submitButton", "blue", "?");
    el.addEventListener("click", oa.view.handleFractionEquationSubmit, false);
    
    btnWrapper = dom.createDiv(null, "moveButtonUp");
    btnWrapper.appendChild( el);
    apDivEl.appendChild( btnWrapper);  
},
/**
 * Fill an already rendered problem equation with new values for operands and
 * result
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblem} ap An arithmetic problem.
 */
fill: function(ap) {
  // find inputs
  var frac;
  var askedFor = document.getElementById("askedFor"),
    askedForNum = document.getElementById("askedForNum"),
    askedForDenom = document.getElementById("askedForDenom");
  
  // clear them
  if (askedFor){
    askedFor.value = "";
    askedFor.focus();
  }
  if (askedForDenom){
    askedForDenom.value = "";
    askedForDenom.focus();
  }
  if (askedForNum){
    askedForNum.value = "";
    askedForNum.focus();
  }

  // fill in the operands
  for ( var i = 1; i <= ap.operands.length; i++) {
    frac = ap.operands[i - 1];
    
    if (ap.type.mixedFractions && ap.type.numberRanges[i].lbD == 1 && ap.type.numberRanges[i].ubD == 1) {
      // special case
      if (ap.type.askedFor !== i)
        document.getElementById("natural" +i).innerHTML = frac[0];
      
    } else {
      // normal fraction
      if (ap.type.askedFor !== i) {
        document.getElementById("numerator" +i).innerHTML = frac[0];
        document.getElementById("denominator" +i).innerHTML = frac[1];
      } else {
        switch (ap.type.askedForNumDenomOrBoth) {
        case NumDenomOrBothEL.numerator:
          document.getElementById("denominator" +i).innerHTML = frac[1];
          break;
        case NumDenomOrBothEL.denominator:
          document.getElementById("numerator" +i).innerHTML = frac[0];
          break;
        }
      }
    }
  }

  if (ap.type.mixedFractions && ap.type.numberRanges[0].lbD == 1 && ap.type.numberRanges[0].ubD == 1) {
    // special case
    if (ap.type.askedFor !== 0)
      document.getElementById("resultNatural").innerHTML = ap.result[0];
    
  } else {
    // normal fraction
    if (ap.type.askedFor === 0){
      switch (ap.type.askedForNumDenomOrBoth) {
      case NumDenomOrBothEL.numerator:
        document.getElementById("resultDenominator").innerHTML = ap.result[1];
        break;
      case NumDenomOrBothEL.denominator:
        document.getElementById("resultNumerator").innerHTML = ap.result[0];
        break;
      }
    }else {
      document.getElementById("resultNumerator").innerHTML = ap.result[0];
      document.getElementById("resultDenominator").innerHTML = ap.result[1];
    }
  }
} 
};

/**
 * Event handler for clicking the "Enter"/"Continue" button
 */
oa.view.handleFractionEquationSubmit = function(e) {
  var correct;
  var userInputField = document.getElementById("askedFor"),
      userInputFieldNum = document.getElementById("askedForNum"),
      userInputFieldDenom = document.getElementById("askedForDenom"),
      answer = [],
      check = true;
  
  if (e.target.innerHTML != "?") {  // click continue event
   
    if (userInputField) {
      userInputField.classList.remove("correct");
      userInputField.classList.remove("given");
    }
    if (userInputFieldNum) {
      userInputFieldNum.classList.remove("correct");
      userInputFieldNum.classList.remove("given");
    }
    if (userInputFieldDenom) {
      userInputFieldDenom.classList.remove("correct");
      userInputFieldDenom.classList.remove("given");
    }
    e.target.innerHTML = "?";
    oa.ctrl.continueCurrentExercise();
  } else {
    
    correct = oa.currentProblem.getCorrectAnswer();
    if (userInputField) {
      if (userInputField.value === "") {
        userInputField.value = correct[0];
        userInputField.classList.add("given");
        check = false;
      } else {
        answer[0] = parseInt( userInputField.value);
        answer[1] = 1;
      }
    } else {
      switch (oa.currentProblem.type.askedForNumDenomOrBoth){
      case NumDenomOrBothEL.numerator:
        if (userInputFieldNum.value === "") {
          userInputFieldNum.value = correct[0];
          userInputFieldNum.classList.add("given");
          check = false;
        } else {
          answer[0] = parseInt( userInputFieldNum.value);
          answer[1] = correct[1];
        }
        break;
      case NumDenomOrBothEL.denominator:
        if (userInputFieldDenom.value === "") {
          userInputFieldDenom.value = correct[1];
          userInputFieldDenom.classList.add("given");
          check = false;
        } else {
          answer[0] = correct[0];
          answer[1] = parseInt( userInputFieldDenom.value);
        }
        break;
      case NumDenomOrBothEL.both:
        if (userInputFieldNum.value === "" || userInputFieldDenom.value === "") {
          userInputFieldNum.value = correct[0];
          userInputFieldDenom.value = correct[1];
          userInputFieldNum.classList.add("given");
          userInputFieldDenom.classList.add("given");
          check = false;
        } else {
          answer[0] = parseInt( userInputFieldNum.value);  
          answer[1] = parseInt( userInputFieldDenom.value);
        }
        break;
      }
    }
    
    if (check) {
      if (oa.ctrl.evaluateFraction( answer)) {
        if (userInputField)
          userInputField.classList.add("correct");
        if (userInputFieldNum)
          userInputFieldNum.classList.add("correct");
        if (userInputFieldDenom)
          userInputFieldDenom.classList.add("correct");
        e.target.innerHTML = "►";
      } else {
        if (userInputField){
          userInputField.classList.add("false");
          userInputField.focus();
        } else {
          if (userInputFieldDenom){
            userInputFieldDenom.classList.add("false");
            userInputFieldDenom.focus();
          }
          if (userInputFieldNum){
            userInputFieldNum.classList.add("false");
            userInputFieldNum.focus();
          }
        }
      }
    } else {
      e.target.innerHTML = "►";
    }
  }
};
/**
 * Event handler for reseting the input field's class value on new user input 
 */
oa.view.handleUserInputFractionEquation = function(e) {
  var nat = document.getElementById("askedFor"),
    num = document.getElementById("askedForNum"),
    den = document.getElementById("askedForDenom");
    
  if (nat){
    nat.classList.remove("correct");
    nat.classList.remove("false");
  }  
  if (num){
    num.classList.remove("correct");
    num.classList.remove("false");
  }
  if (den){
    den.classList.remove("correct");
    den.classList.remove("false");
  }
};